<template>
    <div>
      <el-row :gutter="10" style="margin: 10px 0px ">
        <el-col :span="3">
          <div class="inline-block"> <!-- value -->
            <el-input v-model.trim="item.item_id" @focus="item_id_bak = item.item_id" @change="checkItemId"></el-input>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="inline-block"> <!-- value -->
            <KindEditor :content.sync="item.item_name" editor-type="Input" placeholder="请输入名称"/>
<!--            <el-input v-model="item.item_name" placeholder="请输入名称"></el-input>-->
          </div>
        </el-col>
        <el-col :span="5">
          <div class="inline-block"> <!-- value -->
            <KindEditor :content.sync="item.item_unit" editor-type="Input" placeholder="请输入单位"/>
<!--            <el-input v-model="item.item_unit" placeholder="请输入单位"></el-input>-->
          </div>
        </el-col>
        <el-col :span="2">
          <div class="inline-block"> <!-- add button or delete button -->
            <el-button v-if="idx === 0" circle icon="el-icon-plus" plain type="success" @click="addItem"></el-button>
            <el-button v-else circle icon="el-icon-minus" plain type="danger" @click="deleteItem"></el-button>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import KindEditor from "../../kindeditor/KindEditor";
    export default {
      components:{
        KindEditor
      },
      props:['item', 'idx'],
      data(){
        return{
          item_id_bak: ''
        }
      },
      watch:{
        // 标识符, 只能输入英文字母;
        'item.item_id'(){
          this.item.item_id = this.item.item_id.replace(/[^a-zA-Z]/g, '')
        },
      },
      methods:{
        checkItemId(){
          if(!this.item.item_id){
            this.item.item_id = this.item_id_bak
            this.$message.warning('列项标识不能为空!')
            return
          }
          for (let cntItem of this.$parent.prop.formulaItems){
            if(this.item != cntItem && this.item.item_id === cntItem.item_id){
              this.item.item_id = this.item_id_bak
              this.$message.warning('列项标识重复, 请修改')
              return
            }
          }
          // 修改标识符后, 表达式内的标识符同时修改;
          let reg = new RegExp(`[^a-zA-Z]${this.item_id_bak}[^a-zA-Z]`)
          for(let expressionItem of this.$parent.prop.formulaExpressionItems){
            if(expressionItem.item_expression){
              // 首尾字符可能不匹配, 加空格, 最后再去除
              expressionItem.item_expression = ' ' + expressionItem.item_expression + ' '
              while(reg.test(expressionItem.item_expression)){
                let strOri = expressionItem.item_expression.match(reg)[0]
                let strNew = strOri.replace(this.item_id_bak, this.item.item_id)
                expressionItem.item_expression = expressionItem.item_expression.replace(strOri, strNew)
              }
              expressionItem.item_expression = expressionItem.item_expression.trim()
            }
          }
        },
        addItem() {
          this.$emit("add")
        },
        deleteItem() {
          // 校验表达式内是否引用了当前变量;
          let reg = new RegExp(`[^a-zA-Z]${this.item.item_id}[^a-zA-Z]`)
          for(let expressionItem of this.$parent.prop.formulaExpressionItems){
            // 首尾字符可能不匹配, 加空格
            if(reg.test(' ' + expressionItem.item_expression + ' ')){
              this.$message.warning('当前列项已被计算公式使用, 请先修改计算公式再移除')
              return
            }
          }
          this.$emit("delete", this.idx)
        }
      }
    }
</script>

<style scoped>

</style>
